<template>
  <div class="bilibili-embed">
    <div class="navigation-buttons">
      <button @click="navigateBack">Navigate Back</button>
      <button @click="navigateForward">Navigate Forward</button>
    </div>
    <div class="webview-container" ref="container">
      <webview ref="webview" src="https://community.hotoneaudio.com/presets" :style="{ width: '100%', height: '100%' }"
        allowpopups webpreferences="allowRunningInsecureContent">
      </webview>
      <div class="drag-overlay" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp"
        @mouseleave="handleMouseUp">
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  name: 'WebPage',
  setup(props, { emit }) {
    const webview = ref(null);
    const container = ref(null);
    let startX = 0;
    let isDragging = false;
    let dragStartTime = 0;

    const navigateBack = () => {
      console.log('WebPage: Navigating back');
      emit('page-change', 'back');
    };

    const navigateForward = () => {
      console.log('WebPage: Navigating forward');
      emit('page-change', 'forward');
    };

    const handleMouseDown = (e) => {
      console.log('WebPage: Mouse down detected', e.clientX);
      startX = e.clientX;
      dragStartTime = Date.now();
      isDragging = false;
    };

    const handleMouseMove = (e) => {
      if (Date.now() - dragStartTime > 200 && Math.abs(e.clientX - startX) > 30) {
        isDragging = true;
        e.preventDefault(); // 防止文本选择
      }
    };

    const handleMouseUp = (e) => {
      console.log('WebPage: Mouse up detected', e.clientX);
      const endX = e.clientX;
      const difference = startX - endX;
      const dragTime = Date.now() - dragStartTime;
      console.log('WebPage: Drag distance:', difference, 'Drag time:', dragTime);

      if (isDragging && Math.abs(difference) > 100 && dragTime < 1000) {
        const direction = difference > 0 ? 'forward' : 'back';
        console.log('WebPage: Emitting page-change event:', direction);
        emit('page-change', direction);
      }

      isDragging = false;
    };

    onMounted(() => {
      console.log('WebPage: Component mounted');
      if (webview.value) {
        webview.value.addEventListener('dom-ready', () => {
          console.log('WebPage: Webview DOM ready');
        });
      }
    });

    return {
      webview,
      container,
      navigateBack,
      navigateForward,
      handleMouseDown,
      handleMouseMove,
      handleMouseUp
    };
  }
};
</script>

<style scoped>
.bilibili-embed {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.navigation-buttons {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #f0f0f0;
}

.webview-container {
  flex-grow: 1;
  position: relative;
}

.drag-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  pointer-events: none;
}

.drag-overlay:active {
  pointer-events: auto;
}

button {
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
}
</style>